<template>
  <dv-charts :option="option"/>
</template>

<script>

  export default {
    name: 'salaryByFamous',
    props: {
      salaryByFamous: {
        default: function () {
          return [0, 0]
        }
      }
    },
    data() {
      return {
        option: {

          series: [
            {
              type: 'gauge',
              startAngle: -Math.PI / 2,
              endAngle: Math.PI * 1.5,
              arcLineWidth: 10,
              radius: '80%',
              max: 20000,
              data: [
                {name: '知名企业', value: 14500, gradient: ['#7a08fa', '#a82ffc', '#c264fe', '#f8ecfd']},
                {name: '非知名企业', value: 12500, gradient: ['#071e3d', '#1f4287', '#278ea5', '#21e6c1'], radius: '50%'},
              ],
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              pointer: {
                show: false
              },
              dataItemStyle: {
                lineCap: 'round'
              },
              backgroundArc: {
                show: false
              },
              details: {
                show: true,
                formatter: '{name} {value}元',
                position: 'start',
                offset: [-10, 0],
                style: {
                  fill: '#f1f1f1',
                  fontSize: 10,
                  textAlign: 'right',
                }
              }
            }
          ]
        }
      };
    },
    methods: {},
    watch: {
      salaryByFamous: function (val) {

        if (!val) {
          return false
        }
        console.info("salaryByFamous Changed");
        this.option =
          {

            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 10,
                radius: '80%',
                max: 30000,
                min: 10000,
                data: [
                  {name: '知名企业', value: val[0], gradient: ['#7a08fa', '#a82ffc', '#c264fe', '#f8ecfd']},
                  {name: '非知名企业', value: val[1], gradient: ['#071e3d', '#1f4287', '#278ea5', '#21e6c1'], radius: '50%'},
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: 'round'
                },
                backgroundArc: {
                  show: false
                },
                details: {
                  show: true,
                  formatter: '{name} {value}元',
                  position: 'start',
                  offset: [-10, 0],
                  style: {
                    fill: '#f1f1f1',
                    fontSize: 10,
                    textAlign: 'right',
                  }
                }
              }
            ]
          }

      }
    },
    mounted() {

    }
  };
</script>
<style scoped>

</style>
